/* ============================================================================
  Base 
===============================================================================
  Version 1.0
===============================================================================
  1. General
-------------------------------------------------------------------------------
    1.1 Font-Face
    1.2 Layout
    1.2 Highlighted Text
    1.3 Anchor
    1.4 Form Wrap, Fields, Inputs
-------------------------------------------------------------------------------
  2. Plugin & JS Shortcodes
-------------------------------------------------------------------------------
    2.1 Password Input
    2.2 Custom Select Stylsheet Template
    2.3 Custom Radio/Checkbox Template
    2.4 jQuery Placeholder
-------------------------------------------------------------------------------
  3. Layout & Content
-------------------------------------------------------------------------------
    3.1 Default Article
    3.2 Typography
    3.3 Header
    3.4 Footer
    3.5 Main Menu
	3.6 Transitions for BCCA
	3.7 Extra Shortcodes BCCA
	3.8 CSS3 Spinner
-------------------------------------------------------------------------------
  1.1 Font-Face
-------------------------------------------------------------------------------*/

/******* Brandon Grotesque *******/
@font-face {
  font-family: 'bgT';
  src: url('/media/templates/Brandon_thin.eot');
  src: url('/media/templates/Brandon_thin.eot?#iefix') format('embedded-opentype'),
       url('/media/templates/Brandon_thin.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
    font-display:swap;
}

@font-face {
  font-family: 'bgL';
  src: url('/media/templates/Brandon_light.eot');
  src: url('/media/templates/Brandon_light.eot?#iefix') format('embedded-opentype'),
       url('/media/templates/Brandon_light.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display:swap;
}

@font-face {
  font-family: 'bgR';
  src: url('/media/templates/Brandon_reg.eot');
  src: url('/media/templates/Brandon_reg.eot?#iefix') format('embedded-opentype'),
       url('/media/templates/Brandon_reg.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display:swap;
}

@font-face {
  font-family: 'bgM';
  src: url('/media/templates/Brandon_med.eot');
  src: url('/media/templates/Brandon_med.eot?#iefix') format('embedded-opentype'),
       url('/media/templates/Brandon_med.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display:swap;
}

@font-face {
  font-family: 'bgB';
  src: url('/media/templates/Brandon_bld.eot');
  src: url('/media/templates/Brandon_bld.eot?#iefix') format('embedded-opentype'),
       url('/media/templates/Brandon_bld.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display:swap;
}

@font-face {
  font-family: 'bgBlack';
  src: url('/media/templates/Brandon_blk.eot');
  src: url('/media/templates/Brandon_blk.eot?#iefix') format('embedded-opentype'),
       url('/media/templates/Brandon_blk.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display:swap;
}

/******* Open Sans *******/
@font-face {
  font-family: 'osR';
  src: url('/media/templates/OpenSans-Regular.eot');
  src: url('/media/templates/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
       url('/media/templates/OpenSans-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display:swap;
}

@font-face {
  font-family: 'osCL';
  src: url('/media/templates/OpenSans-CondLight.eot');
  src: url('/media/templates/OpenSans-CondLight.eot?#iefix') format('embedded-opentype'),
       url('/media/templates/OpenSans-CondLight.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display:swap;
}

@font-face {
  font-family: 'osCB';
  src: url('/media/templates/OpenSans-CondBold.eot');
  src: url('/media/templates/OpenSans-CondBold.eot?#iefix') format('embedded-opentype'),
       url('/media/templates/OpenSans-CondBold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display:swap;
}

@font-face {
  font-family: 'osB';
  src: url('/media/templates/OpenSans-Bold.eot');
  src: url('/media/templates/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
       url('/media/templates/OpenSans-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display:swap;
}

@font-face {
  font-family: 'osEB';
  src: url('/media/templates/OpenSans-ExtraBold.eot');
  src: url('/media/templates/OpenSans-ExtraBold.eot?#iefix') format('embedded-opentype'),
       url('/media/templates/OpenSans-ExtraBold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display:swap;
}


/*-------------------------------------------------------------------------------
  1.2 Layout
-------------------------------------------------------------------------------*/

body {
  color: #000;
  font-family: osR, Arial, Tahoma, sans-serif;
  position:relative;
  margin:0;
  padding:0;
}


#page {
  min-height: 100%;
  height: auto !important;
  height: 100%;
}

#content{}


/*-------------------------------------------------------------------------------
  1.3 Highlighted Text
-------------------------------------------------------------------------------*/

ins        { background-color: #1179AC;text-decoration: none;}
mark       { background-color: #1179AC;font-style: normal; font-weight: normal;}
a          {  color:#0078ae; }

/*-------------------------------------------------------------------------------
  1.4 Anchor
-------------------------------------------------------------------------------*/

a,
a:hover,
a:active {
  -webkit-transition:color 300ms ease;
  -moz-transition:color 300ms ease;
  -o-transition:color 300ms ease;
  transition:color 300ms ease;
}

a{text-decoration:none;}

/*-------------------------------------------------------------------------------
  1.4 Form Wrap, Fields, Inputs (Empty Template)
-------------------------------------------------------------------------------*/
/* CSS Hack for iOS devices */
input[type="submit"],
input[type="text"],
input[type="password"],
input[type="email"],
textarea {
  -webkit-appearance:none; 
  -webkit-border-radius:0;
}

/*input[type="checkbox"]:checked, input[type="radio"]:checked { background:rgba(0, 0, 0, 0.8); }*/

input,
input:hover,
input:focus,
textarea,
textarea:hover,
textarea:focus{
  transition:      250ms all ease;
  -moz-transition:  250ms all ease;
  -webkit-transition:  250ms all ease;
  -o-transition:    250ms all ease;
  -ms-transition:    250ms all ease;
  -webkit-appearance:none; 
  -webkit-border-radius:0;
}

fieldset,input,select,textarea { border:0px none; background:transparent; }

form { margin:0;padding:0; }

.form input:hover,
.form input:focus,
.form textarea:hover,
.form textarea:focus{
  border-color:#111;
}

.form.style1 .field{ }
.form.style1 .field label{ }
.form.style1 .field input{ }
.form.style1 .field textarea{ }
.form.style1 .field select{ }

.form.style1 .field label.error{
  display:none !important;
}

.form.style1 .field input.error,
.form.style1 .field textarea.error,
.form.style1 .field select.error{
  border-color:red !important;
}

/*-------------------------------------------------------------------------------
  2.1 Password Input (Empty Template)
-------------------------------------------------------------------------------*/

.password-input-wrap{
  position: relative;
  width:100%;
}

.password-input-wrap .password-label{
  position: absolute;
  top:0;
  left:0;
  display:block;
  cursor: text;

  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.password-input-wrap.error .password-input{
  border-color:red !important;
}

/*-------------------------------------------------------------------------------
  2.3 Custom Radio/Checkbox Template (Empty Template)
-------------------------------------------------------------------------------*/

.ez-hide {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity:0;
  -khtml-opacity: 0;
  opacity: 0;
}

.field .checkbox {
  display:inline-block;
  width:24px;
  height:24px;
  float:left;
  cursor:pointer;
}

.field .radio {
  display:inline-block;
  width:24px;
  height:24px;
  float:left;
  cursor:pointer;
}

.checkbox.checked { background-position: 0 -30px; }
.radio.selected { background-position: 0 -30px; }
.checkbox, .radio { zoom: 1; *display:inline; _height:24px; }

/*-------------------------------------------------------------------------------
  2.4 jQuery Placeholder
-------------------------------------------------------------------------------*/

.placeholder{ color:#666; }
.placeholderFocus{ color:#000; }

/*-------------------------------------------------------------------------------
  3.1 Default Article
-------------------------------------------------------------------------------*/

.marticle .btext h1,
.marticle .btext h2,
.marticle .btext h3,
.marticle .btext h4,
.marticle .btext h5,
.marticle .btext h6{
  margin:0;
  padding:0;
}

.marticle .btext h1{ font-size:35px; }
.marticle .btext h2{ font-size:30px; }
.marticle .btext h3{ font-size:25px; }
.marticle .btext h4{ font-size:20px; }
.marticle .btext h5{ font-size:17px; }
.marticle .btext h6{ font-size:14px; }

.marticle .btext ol,
.marticle .btext ul{
  margin-left:30px;
  margin-bottom:30px;
}

.marticle .btext ol li{
  list-style: decimal;
}

.marticle .btext a:hover,
.marticle .btext a:active{
  text-decoration: underline;
}

.marticle .btext p{
  margin-bottom:15px;
}

.marticle .btext ul li,
.marticle .btext ol li,
.marticle .btext p { /*font-size:16px;*/line-height:24px; }

.marticle .btext strong { font-weight:normal; font-family: 'osB'; }
 
blockquote{
  content:'"';
  display: block;
  margin-bottom:15px;
  font-style: italic;
  font-family: Georgia !important;
  font-style: italic !important;
}

blockquote p{
  display: inline;
  font-family: Georgia !important;
  font-style: italic !important;
}

/*-------------------------------------------------------------------------------
  3.2 Typography
-------------------------------------------------------------------------------*/

h1,h2,h3,h4,h5,h6 { font-weight: normal; margin:0; padding:0; }

h1 { font-size: 40px; }
h2 { font-size: 35px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }
h5 { font-size: 15px; }
h6 { font-size: 10px; }

strong  { font-weight: bold; }
em    { font-style: italic; }
small  { font-size: 85%; }

/*-------------------------------------------------------------------------------
  3.3 Header
-------------------------------------------------------------------------------*/

/*-------------------------------------------------------------------------------
  3.4 Footer
-------------------------------------------------------------------------------*/

/*-------------------------------------------------------------------------------
  3.5 Main Menu
-------------------------------------------------------------------------------*/


/*-------------------------------------------------------------------------------
  3.6 Transitions
-------------------------------------------------------------------------------*/

/* fade */
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { -webkit-opacity: 0; }
    to   { -webkit-opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* scale */

@keyframes scale {
    from { transform:scale(0.6); }
    to   { transform:scale(1); }
}

/* Firefox < 16 */
@-moz-keyframes scale {
    from { transform:scale(0.6); }
    to   { transform:scale(1); }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes scale {
    from { -webkit-transform:scale(0.6); }
    to   { -webkit-transform:scale(1); }
}

/* Internet Explorer */
@-ms-keyframes scale {
    from { transform:scale(0.6); }
    to   { transform:scale(1); }
}

/* Opera < 12.1 */
@-o-keyframes scale {
    from { transform:scale(0.6); }
    to   { transform:scale(1); }
}


/*-------------------------------------------------------------------------------
  3.7 Extra Shortcodes
-------------------------------------------------------------------------------*/
.alpha { padding-left:0px; }
.omega { padding-right:0px; }

.block { display:block; }
.inline-block { display:inline-block; }
.inline { display:inline; }
.table-cell { display:table-cell; }
.valign { display:table-cell;vertical-align:middle; }

.vcenter-outer { display:table;position:absolute;width:100%;height:100%;top:0px;left:0px; }
.vcenter-middle { display:table-cell;vertical-align:middle; }
.vcenter-inner { position:relative; }

/* different approach - parent needs to be relative */
.vcenter { position:absolute;top:50%;transform:translateY(-50%);-webkit-transform:translateY(-50%);width:100%; }

.center { text-align:center;margin-left:auto;margin-right:auto;float:none; }
.tleft { text-align:left; }
.tright { text-align:right; }
.tcenter { text-align:center; }

.border-dot { border:1px dotted #ccc; }
.border-dot-top { border-top:1px dotted #ccc; }
.border-dot-right { border-right:1px dotted #ccc; }
.border-dot-bottom { border-bottom:1px dotted #ccc; }
.border-dot-left { border-left:1px dotted #ccc; }

/*-------------------------------------------------------------------------------
  3.8 CSS3 Spinner
-------------------------------------------------------------------------------*/
#global-spinner {  
  position:fixed; 
  width:100%; 
  height:100%; 
  min-height:100%; 
  left:0;
  top:0;
  background-color:rgba(251,251,251,.7);
}

.spinner {
  background-color:#7C0700;
  width: 60px;
  height: 60px;
  z-index:999;
  left:50%;
  top:50%;
  position:absolute;
  margin-top:-30px;
  margin-left:-30px;
  -webkit-animation: rotateplane 1.2s infinite ease-in-out;
  -moz-animation: rotateplane 1.2s infinite ease-in-out;
  animation: rotateplane 1.2s infinite ease-in-out;
  background-color:#D73D37;
}

@-webkit-keyframes rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@-moz-keyframes rotateplane {
  0% { -moz-transform: perspective(120px) }
  50% { -moz-transform: perspective(120px) rotateY(180deg) }
  100% { -moz-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}